<!DOCTYPE HTML>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
function shouldBeGreen(x, y) {
    d = ctx.getImageData(x, y, 1, 1).data;
    assert_array_equals(d, [0, 128, 0, 255]);
}

function shouldBeTransparent(x, y) {
    d = ctx.getImageData(x, y, 1, 1).data;
    assert_array_equals(d, [0, 0, 0, 0]);
}

function checkBitmap(imageBitmap, width, height)
{
    bitmap = imageBitmap;
    assert_equals(bitmap.width, width);
    assert_equals(bitmap.height, height);
    var half_width = width / 2;
    var half_height = height / 2;
    ctx.clearRect(0, 0, 200, 200);
    ctx.drawImage(bitmap, 0, 0);
    shouldBeGreen(0, 0);
    shouldBeGreen(0, half_height - 1);
    shouldBeGreen(half_width - 1, 0);
    shouldBeGreen(half_width - 1, half_height - 1);
    shouldBeTransparent(0, height - 1);
    shouldBeTransparent(width - 1, 0);
    shouldBeTransparent(width - 1, height - 1);
}

function checkFlippedBitmap(imageBitmap, width, height)
{
    bitmap = imageBitmap;
    assert_equals(bitmap.width, width);
    assert_equals(bitmap.height, height);
    var half_width = width / 2;
    var half_height = height / 2;
    ctx.clearRect(0, 0, 200, 200);
    ctx.drawImage(bitmap, 0, 0);
    shouldBeTransparent(0, 0);
    shouldBeTransparent(0, half_height - 1);
    shouldBeTransparent(half_width - 1, 0);
    shouldBeTransparent(half_width - 1, half_height - 1);
    shouldBeGreen(0, half_height);
    shouldBeGreen(half_width - 1, half_height);
    shouldBeGreen(0, height - 1);
    shouldBeGreen(half_width - 1, height - 1);
}

function generateTests() {
    imageBitmaps = {};
    var p1 = createImageBitmap(image).then(function(image) { imageBitmaps.noResize = image });
    var p2 = createImageBitmap(image, {resizeWidth: 50, resizeHeight: 50, resizeQuality: "high"}).then(function(image) { imageBitmaps.resizeDown = image });
    var p3 = createImageBitmap(image, 50, 50, 100, 100).then(function(image) { imageBitmaps.cropCenter = image });
    var p4 = createImageBitmap(image, 50, 50, 100, 100, {resizeWidth: 200, resizeHeight: 200, resizeQuality: "high"}).then(function(image) { imageBitmaps.cropResizeUp = image });
    var p5 = createImageBitmap(image, 50, 50, 100, 100, {resizeWidth: 50, resizeHeight: 50, resizeQuality: "high"}).then(function(image) { imageBitmaps.cropResizeDown = image });
    var p6 = createImageBitmap(image, {imageOrientation: "flipY"}).then(function(image) { imageBitmaps.noResizeFlip = image });
    var p7 = createImageBitmap(image, 50, 50, 100, 100, {imageOrientation: "flipY"}).then(function(image) { imageBitmaps.cropCenterFlip = image });
    var p8 = createImageBitmap(image, {resizeWidth: 100, resizeHeight: 100, resizeQuality: "high", imageOrientation: "flipY"}).then(function(image) { imageBitmaps.resizeFlip = image });
    var p9 = createImageBitmap(image, 50, 50, 100, 100, {resizeWidth: 200, resizeHeight: 200, resizeQuality: "high", imageOrientation: "flipY"}).then(function(image) { imageBitmaps.cropResizeFlip = image });
    return Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9]).then(t.step_func_done(function() {
        checkBitmap(imageBitmaps.noResize, 200, 200);
        checkBitmap(imageBitmaps.resizeDown, 50, 50);
        checkBitmap(imageBitmaps.cropCenter, 100, 100);
        checkBitmap(imageBitmaps.cropResizeUp, 200, 200);
        checkBitmap(imageBitmaps.cropResizeDown, 50, 50);
        checkFlippedBitmap(imageBitmaps.noResizeFlip, 200, 200);
        checkFlippedBitmap(imageBitmaps.cropCenterFlip, 100, 100);
        checkFlippedBitmap(imageBitmaps.resizeFlip, 100, 100);
        checkFlippedBitmap(imageBitmaps.cropResizeFlip, 200, 200);
    }), t.step_func_done(function() {
        assert_true(false, 'Promise rejected');
    }));
}

var t = async_test('createImageBitmap from svg');
    
var canvas = document.createElement("canvas");
canvas.setAttribute("width", "200");
canvas.setAttribute("height", "200");
var ctx = canvas.getContext("2d");

var image = new Image();
image.onload = t.step_func(function() {
    return generateTests();
});
image.src = '../../svg/as-image/resources/100px-green-rect.svg';
</script>
